{extend name="./app/admin/view/main.html" /}
{block name="title"}网站模板 - {__block__}{/block}



{block name="style"}
<link rel="stylesheet" href="{$mipInfo.domain}/assets/codemirror/lib/codemirror.css">
<style type="text/css">
    .line-gray{
        margin:10px;
        border-top: solid 1px  #dadada;
    }
    .box-left-tree{
        width: 300px;
        padding-left:10px;
        padding-bottom: 30px;
        margin-bottom: 100px;
    }
    .box-right-edit{
        flex: 1;
        padding-left:10px;
        padding-top:10px;
        padding-bottom: 30px;
        margin-bottom: 100px;
        min-height: 300px;
        background-color: #fff;

    }

    .img-imgfile{
        max-width: 95%;
    }
    .box-codemirror{
        width: 96%;
        min-height: 600px;
        border: solid 1px #e6e6e6;
    }

    .row1{
        display:flex;
        padding-top:12px;
    }
    .row1 .title1{
        text-align: right;
        padding-right:10px;
        width: 120px;
    }
    .row1 .info1{
        width: 200px;
    }
    .row1 .btn1{
        width: 300px;
    }
</style>
{/block}

{block name="main"}
 
<header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">设置</h4> <h5 class="sub-title"> <a href="{$mipInfo.domain}/{$Think.config.admin}/setting/template">网站模板</a>
        -- 编辑 </h5>
    </div>

</header>

<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    <div class="row">
        <div class="box-left-tree"><Tree :data="fileTree" :render="renderTreeNode"></Tree></div>
        <div class="box-right-edit">

            <div class="box-edit-folder" v-if="editFolder">
                <div class="btns-edit-folder">
                    <i-Button size="small" type="primary" v-on:click="clk_create_subfolder">新建子文件夹</i-Button>
                    <i-Button size="small" type="primary" v-on:click="clk_add_file">新建文件</i-Button>
                    <i-Button size="small" type="primary" v-on:click="clk_upload_file">上传文件</i-Button>
                    <i-Button size="small" type="primary" v-if="editFolder.editable" v-on:click="clk_rename_folder">重命名文件夹</i-Button>
                    <i-Button size="small" v-if="editFolder.editable"  v-on:click="clk_del_folder">删除文件夹</i-Button>

                </div>

                <div class="box-folder-info">
                    <div class="row1"> <div class="title1"> 文件夹：</div> <div class="info1"> {{editFolder.filename}} </div> </div>
                    <div class="row1"> <div class="title1"> 文件夹路径：</div> <div class="info1"> {{editFolder.relative_path}}</div> </div>
                </div>
                <div class="box-folder-rename" v-if=" doing2 == 'rename_folder' ">
                    <div class="line-gray"></div>
                    <div class="row1">
                        <div class="title1"> 重命名文件夹：</div>
                        <div class="info1"><i-Input type="text" v-model="rename_filename" placeholder="重命名文件夹..."></i-Input></div>
                        <div class="btn1">
                            <Button-Group>
                                <i-Button type="primary" v-on:click="clk_save_rename_folder">保存</i-Button>
                                <i-Button v-on:click="clk_cancel_rename_folder">取消</i-Button>
                            </Button-Group>
                        </div>
                    </div>

                </div>

                <div class="box-folder-create-subfolder" v-if=" doing2 == 'create_subfolder' ">
                    <div class="line-gray"></div>
                    <div class="row1">
                        <div class="title1"> 新建子文件夹：</div>
                        <div class="info1"><i-Input type="text" v-model="subfolder_filename" placeholder="子文件夹名..."></i-Input></div>
                        <div class="btn1">
                            <Button-Group>
                                <i-Button type="primary" v-on:click="clk_save_subfolder_filename">保存</i-Button>
                                <i-Button v-on:click="clk_cancel_save_subfolder_filename">取消</i-Button>
                            </Button-Group>
                        </div>
                    </div>

                </div>
                <div class="box-folder-create-subfolder" v-if=" doing2 == 'add_file' ">
                    <div class="line-gray"></div>
                    <div class="row1">
                        <div class="title1"> 新建文件：</div>
                        <div class="info1"><i-Input type="text" v-model="subfile_filename" placeholder="文件名..."></i-Input></div>
                        <div class="btn1">
                            <Button-Group>
                                <i-Button type="primary" v-on:click="clk_save_subfile_filename">保存</i-Button>
                                <i-Button v-on:click="clk_cancel_save_subfile_filename">取消</i-Button>
                            </Button-Group>
                        </div>
                    </div>
                </div>

                <div class="box-folder-create-subfolder" v-if=" doing2 == 'upload_file' ">
                    <div class="line-gray"></div>
                    <div class="row1">
                        <div class="title1"> 上传文件：</div>
                        <div class="info1">
                            <Upload action="//jsonplaceholder.typicode.com/posts/">
                                <i-Button icon="ios-cloud-upload-outline">Upload files</i-Button>
                            </Upload>
                        </div>
                        <div class="btn1">
                            <Button-Group>
                                <i-Button v-on:click="clk_cancel_save_subfile_filename">取消</i-Button>
                            </Button-Group>
                        </div>
                    </div>

                </div>

            </div>


            <div class="box-edit-folder" v-if="editFile">
                <div class="btns-edit-folder">
                    <i-Button size="small" type="primary" v-on:click="clk_add_file2">新建文件</i-Button>
                    <i-Button size="small" type="primary" v-on:click="clk_upload_file2">上传文件</i-Button>
                    <i-Button size="small" type="primary" v-if="editFile.editable" v-on:click="clk_rename_file">重命名文件</i-Button>
                    <i-Button size="small" v-if="editFile.editable"  v-on:click="clk_del_file">删除文件</i-Button>
                </div>

                <div class="box-folder-info">
                    <div class="row1"> <div class="title1"> 文件夹：</div> <div class="info1"> {{editFile.filename}} </div> </div>
                    <div class="row1"> <div class="title1"> 文件夹路径：</div> <div class="info1"> {{editFile.relative_path}}</div> </div>
                </div>

                <div class="box-folder-rename" v-if=" doing2 == 'rename_file' ">
                    <div class="line-gray"></div>
                    <div class="row1">
                        <div class="title1"> 重命名文件：</div>
                        <div class="info1"><i-Input type="text" v-model="rename_filename" placeholder="重命名文件..."></i-Input></div>
                        <div class="btn1">
                            <Button-Group>
                                <i-Button type="primary" v-on:click="clk_save_rename_file">保存</i-Button>
                                <i-Button v-on:click="clk_cancel_rename_file">取消</i-Button>
                            </Button-Group>
                        </div>
                    </div>
                </div>

                <div class="box-folder-create-subfolder" v-if=" doing2 == 'add_file2' ">
                    <div class="line-gray"></div>
                    <div class="row1">
                        <div class="title1"> 新建文件：</div>
                        <div class="info1"><i-Input type="text" v-model="subfile_filename" placeholder="文件名..."></i-Input></div>
                        <div class="btn1">
                            <Button-Group>
                                <i-Button type="primary" v-on:click="clk_save_subfile_filename">保存</i-Button>
                                <i-Button v-on:click="clk_cancel_save_subfile_filename">取消</i-Button>
                            </Button-Group>
                        </div>
                    </div>
                </div>

                <div class="box-folder-create-subfolder" v-if=" doing2 == 'upload_file2' ">
                    <div class="line-gray"></div>
                    <div class="row1">
                        <div class="title1"> 上传文件：</div>
                        <div class="info1">
                            <Upload action="//jsonplaceholder.typicode.com/posts/">
                                <i-Button icon="ios-cloud-upload-outline">Upload files</i-Button>
                            </Upload>
                        </div>
                        <div class="btn1">
                            <Button-Group>
                                <i-Button v-on:click="clk_cancel_save_subfile_filename">取消</i-Button>
                            </Button-Group>
                        </div>
                    </div>

                </div>

                <div class="box-folder-create-subfolder" v-if=" doing == 'view_txtfile' ">
                    <div class="line-gray"></div>
                    <div class="box-codemirror">

                    </div>
                </div>

                <div class="box-folder-create-subfolder" v-if=" doing == 'view_imgfile' ">
                    <div class="line-gray"></div>
                    <img :src="imgurl" class="img-imgfile">
                </div>


            </div>


        </div>
    </div>

</main>
{/block}
    
{block name="javascript"}
{__block__}
<script src="{$mipInfo.domain}/assets/codemirror/lib/codemirror.js"></script>
<script src="{$mipInfo.domain}/assets/codemirror/language/javascript/javascript.js"></script>
<script src="{$mipInfo.domain}/assets/codemirror/language/xml/xml.js"></script>
<script src="{$mipInfo.domain}/assets/codemirror/language/css/css.js"></script>
<script src="{$mipInfo.domain}/assets/codemirror/language/vue/vue.js"></script>
<script src="{$mipInfo.domain}/assets/codemirror/language/htmlmixed/htmlmixed.js"></script>


<script>
    new Vue({
        el: '#app',
        data: {
            siteInfo: '',
            fileName: '{$filename}',
            templateInfo: '',
            fileTree: '',
            editFolder: '',
            editFile: '',
            doing: '',
            doing2: '',
            rename_filename: '',
            subfolder_filename:'',
            subfile_filename: '',
            myCodeMirror : null,
            imgurl: '',

        },
        watch: {
            siteChangeStatus() {
                this.getSettingData();
            },
            'doing':function(newVal,oldVal){

                if(oldVal == 'view_txtfile' ){
                    this.myCodeMirror = null;
                }
            }

        },
        mounted() {
            this.getSettingData();
            this.getTemplateInfo();
            this.getFileTree();
        },
        methods: {
            getTemplateInfo(){
                var _this = this;
                this.$mip.ajax("{$mipInfo.domain}/setting/ApiAdminTemplate/get_info_by_filename",{"fileName": _this.fileName })
                    .then(function(res){
                        if(res.code==1){
                            _this.templateInfo = res.data;
                        }
                    })

            },
            getSettingData() {
                var _this = this;
                this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminSetting/settingSelect', {
                    
                }).then(function(res) {
                    if(res.code == 1) {
                        _this.siteInfo = res.data;
                    }
                });
            },
            getFileTree(){
                var _this = this;
                this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminTemplate/get_for_itree',{"fileName": _this.fileName,'t':1122}).then(function(res) {
                    if(res.code == 1) {
                        _this.fileTree = res.data;
                    }
                });

            },
            initCodeMirror(){
                if(this.myCodeMirror==null){
                    this.myCodeMirror = CodeMirror( document.querySelector( '.box-codemirror') ,{
                        lineNumbers: true, smartIndent:true,lineWrapping:true,
                    });
                }

                if(this.editFile.ext == 'html'){
                    this.myCodeMirror.setOption('mode','htmlmixed');
                }else if(this.editFile.ext == 'js'||this.editFile.ext == 'json'){
                    this.myCodeMirror.setOption('mode','javascript');
                }else {
                    this.myCodeMirror.setOption('mode',this.editFile.ext);
                }

                var _this = this;
                this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminTemplate/get_srcfile_content', { 'fullpath':_this.editFile.fullpath })
                    .then(function(res) {
                    if(res.code == 1) {
                        _this.myCodeMirror.setValue( res.data );
                        _this.myCodeMirror.setSize( '100%','100%' );
                    }
                });



            },
            renderTreeNode(h, {root,node,data}){
                var _d1 = data;
                var _this = this;
                return h('span',{},[
                    h('span',{
                        attrs:{
                            data1:data.fullpath,
                        },
                        style:{
                            color: data.type =='file'?'#333': '#f70',
                            cursor:'pointer',
                        },
                        on:{
                            click:(evt)=>{
                                let type = _d1.type;
                                let editable = _d1.editable;

                                _this.editFolder = null;
                                _this.editFile = null;
                                _this.doing = '';

                                if(type== 'folder'){
                                    _d1.relative_path = _this.fileName+"/"+_d1.path;
                                    _this.editFolder = _d1;
                                    _this.doing = 'click_folder';
                                }
                                if(type== 'file'){
                                    _d1.relative_path = _this.fileName+"/"+_d1.path;
                                    _this.editFile = _d1;

                                    if(_d1.ext =='html'||_d1.ext =='js'||_d1.ext =='css'||_d1.ext =='json' ){
                                        _this.doing = 'view_txtfile';
                                        setTimeout(_this.initCodeMirror,300 );
                                        return;
                                    }else if(_d1.ext =='jpg'||_d1.ext =='png'||_d1.ext =='gif'||_d1.ext =='svg' ){
                                        _this.doing = 'view_imgfile';
                                        _this.imgurl = _this.siteInfo.domain+"/tpl/"+_this.fileName+"/"+_this.editFile.path;

                                    }

                                    if(_this.myCodeMirror!=null){
                                        _this.myCodeMirror.setValue('');
                                    }

                                }

                            }
                        }
                    },[
                        h('img',{
                            attrs: {
                                src: data.icon
                            },
                            style: {
                                width:'15px',
                                marginRight: '10px',
                            }
                        }),
                        h('span',{
                            style:{
                                fontSize:"12px",
                            }
                        },data.title)
                    ])
                ])
            },

            // 操作文件夹系列
            clk_del_folder(){
                let _this = this;
                if(!confirm('您确信要删除该文件夹吗？')){
                    return;
                }
                this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminTemplate/remove_file',{'filepath':_this.editFolder.fullpath})
                .then(function (res) {
                    if(res.code == 1 ){
                        _this.$Message.success(res.msg);
                        _this.getFileTree();
                        _this.editFolder = '';
                        return;
                    }

                    _this.$Message.warning(res.msg);

                })

            },
            clk_rename_folder(){
                this.doing2 = 'rename_folder';
                this.rename_filename = this.editFolder.filename;
            },
            clk_create_subfolder(){
                this.doing2 = 'create_subfolder';
            },
            clk_add_file(){
                this.doing2 = "add_file";
            },
            clk_upload_file(){
                this.doing2 = "upload_file";
            },
            clk_save_rename_folder(){
                this.editFolder.filename =this.rename_filename;
                this.doing2 = '';
            },
            clk_cancel_rename_folder(){
                this.doing2 = '';
            },
            clk_save_subfolder_filename(){
                let _this = this;
                if(this.subfolder_filename==''){
                    this.$Message.warning('新建文件夹的名称必须填写!');
                    return;
                }

                this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminTemplate/create_subfolder', { 'basepath':_this.editFolder.fullpath, 'subfolder_filename':_this.subfolder_filename })
                    .then(function(res) {
                        if(res.code == 1 ) {
                            _this.$Message.success(res.msg);
                            _this.getFileTree();

                            _this.doing2 = '';
                        }else{
                            _this.$Message.warning(res.msg);
                        }
                    });

            },
            clk_cancel_save_subfolder_filename(){
                this.doing2 = '';
            },
            clk_save_subfile_filename(){
                this.doing2 = '';
            },
            clk_cancel_save_subfile_filename(){
                this.doing2 = '';
            },

            // 操作文件
            clk_del_file(){
                let _this = this;
                if(!confirm('您确信要删除该文件吗？')){
                    return;
                }
                this.$mip.ajax('{$mipInfo.domain}/setting/ApiAdminTemplate/remove_file',{'filepath':_this.editFile.fullpath})
                    .then(function (res) {
                        if(res.code == 1 ){
                            _this.$Message.success(res.msg);
                            _this.getFileTree();
                            _this.editFile = '';
                            return;
                        }

                        _this.$Message.warning(res.msg);

                    })
            },
            clk_rename_file() {
                this.doing2 = 'rename_file';
            },
            clk_save_rename_file(){
                this.doing2 = '';
            },
            clk_cancel_rename_file (){
                this.doing2 = '';
            },
            clk_add_file2(){
                this.doing2 = 'add_file2';
            },
            clk_upload_file2(){
                this.doing2 = 'upload_file2';
            },


        }
    })
  </script>
{/block}